<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="忘记密码"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" th:href="@{/css/community.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}" type="application/javascript"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script type="application/javascript">
        window.onload=function () {
            $(".autocomplete ul li").each(function () {
                $(this).bind({
                    click:function () {
                        $("#account").val($(this).text());
                        $(".on").removeClass("on");
                        $(this).addClass("on");
                        $(".autocomplete").addClass("layui-hide");
                    },
                    mouseover:function () {
                        $(this).addClass("mouseoverTarget");
                    },
                    mouseout:function () {
                        $(this).removeClass("mouseoverTarget");
                    }
                });
            });

            $("#account").on("keydown", function (e) {
                if(!$(".autocomplete").hasClass("layui-hide")){
                    if(e.keyCode == 38){
                        var size = $(".on").prevAll("li[class!='layui-hide']").length;
                        if(size > 0){
                            $(".on").prevAll("li[class!='layui-hide']:first").addClass("on");
                            $(".on:last").removeClass("on");
                        }else{
                            $(".on:first").removeClass("on");
                            $(".autocomplete li[class!='layui-hide']:last").addClass("on");
                        }
                    }else if (e.keyCode == 40){
                        var size = $(".on").nextAll("li[class!='layui-hide']").length;
                        if(size > 0){
                            $(".on").nextAll("li[class!='layui-hide']:first").addClass("on");
                            $(".on:first").removeClass("on");
                        }else{
                            $(".on:last").removeClass("on");
                            $(".autocomplete li[class!='layui-hide']:first").addClass("on");
                        }
                    }else if(e.keyCode == 13){
                        $("#account").val($(".on").text());
                        $(".autocomplete").addClass("layui-hide");
                    }
                }
            });

            $("#account").on("keyup", function (e) {
                var account = $("#account").val();
                if(account.indexOf('@') != 0 && account.indexOf('@') != -1 && e.keyCode != 13 && e.keyCode != 38 && e.keyCode != 40){
                    var prefix = account.split("@")[0];
                    var aa = account.split("@")[1];
                    $(".autocomplete ul li").each(function () {
                        var suffix = $(this).text();
                        var suffix2 = suffix.split("@")[1];
                        if(suffix2.indexOf(aa) != -1){
                            $(this).text(prefix + '@' + suffix2);
                            $(this).removeClass("layui-hide");
                        }else{
                            $(this).addClass("layui-hide");
                        }
                    });
                    $(".on").removeClass("on");
                    $(".autocomplete li[class!='layui-hide']:first").addClass("on");
                    if($(".autocomplete li[class!='layui-hide']").length != 0){
                        $(".autocomplete").removeClass("layui-hide");
                    }else{
                        $(".autocomplete").addClass("layui-hide");
                    }
                }else if(e.keyCode != 38 && e.keyCode != 40){
                    $(".autocomplete").addClass("layui-hide");
                }
            });
        };

        layui.use('element',function () {
            var element = layui.element;
        });

        function checkAccount() {
            var check = false;
            var account = $("#account").val();
            if(!account){
                $("#account").next().html("请输入手机号/邮箱");
                check = false;
            }else{
                $("#account").next().html("");
                check = true;
            }
            return check;
        }

        function checkPhone() {
            var check = false;
            var phone = $("#phone").val();
            var regExp = /^1(3|4|5|6|7|8|9)\d{9}$/;
            if(phone == null || phone == ""){
                $("#phone").next().html("请输入手机号");
                check = false;
            }else if(regExp.test(phone) == false){
                $("#phone").next().html("请输入正确的手机号");
                check = false;
            }else{
                $("#phone").next().html("");
                check = true;
            }
            return check;
        }

        function checkCode() {
            var check = false;
            var code = $("#code").val();
            if(code == null || code == ""){
                $("#code").parent().next().html("请输入验证码");
                check = false;
            }else{
                $("#code").parent().next().html("");
                check = true;
            }
            return check;
        }

        function newPassword() {
            var checkPwd = false;
            var newPwd = $("#newPwd").val();
            var regExp=/^(\w){6,16}$/;
            if(newPwd == null || newPwd == ""){
                $("#newPwd").next().html("请输入密码");
                checkPwd = false;
            }else if(newPwd.length<6){
                $("#newPwd").next().html("密码不能小于6个字符");
                checkPwd = false;
            }else if(newPwd.length>16){
                $("#newPwd").next().html("密码不能大于16个字符");
                checkPwd = false;
            }else if(regExp.test(newPwd) == false){
                $("#newPwd").next().html("密码不能包含特殊字符,可以是字母，数字和下划线");
                checkPwd = false;
            }else{
                $("#newPwd").next().html("");
                checkPwd = true;
            }
            return checkPwd;
        }

        function confirmPassword() {
            var checkPwd = false;
            var newPwd = $("#newPwd").val();
            var confirmPwd = $("#confirmPwd").val();
            if(confirmPwd == null || confirmPwd == ""){
                $("#confirmPwd").next().html("请输入确认密码");
                checkPwd = false;
            }else if(newPwd != confirmPwd){
                $("#confirmPwd").next().html("两次输入的密码不一致");
                checkPwd = false;
            }else{
                $("#confirmPwd").next().html("");
                checkPwd = true;
            }
            return checkPwd;
        }

        var countdown=60;
        function getCode(value) {
            var obj = $("#el-code-button");
            var span = obj.children();
            var phone = $(".modifyAccount").val();
            var regExp = /^1(3|4|5|6|7|8|9)\d{9}$/;
            if(!phone){
                $(".el-code").next().html("请输入手机号");
            }else if(regExp.test(phone) == false){
                $(".el-code").next().html("请输入正确的手机号");
            }else {
                $.ajax({
                    type: "post",
                    url: "/getCode/" + value,
                    contentType: "application/json",
                    data: phone,
                    success: function (result) {
                        if (result.code == 200) {
                            settime(obj, span);
                        } else {
                            $(".el-code").next().html(result.message);
                        }
                    },
                    dataType: "json"
                });
            }
        }

        function settime(obj,span) { //发送验证码倒计时
            if (countdown == 0) {
                obj.attr('disabled',false);
                span.html("获取验证码");
                countdown = 60;
                return;
            } else {
                obj.attr('disabled',true);
                span.html("" + countdown + "s后重新获取");
                countdown--;
            }
            setTimeout(function(){
                settime(obj,span);
            },1000)
        }

        function getEmailCode(value) {
            var obj = $("#el-code-button");
            var span = obj.children();
            var email = $(".modifyAccount").val();
            var regExp = /^[A-Za-z0-9]+([-_\.][A-Za-z0-9]+)*@([A-Za-z0-9]+\.)+[a-z]{2,3}$/;
            if(!email){
                $(".el-code").next().html("请输入邮箱号");
            }else if(regExp.test(email) == false){
                $(".el-code").next().html("请换用qq,163邮箱等常用公共邮件服务");
            }else{
                $.ajax({
                    type:"post",
                    url:"/getEmailCode/" + value,
                    contentType:"application/json",
                    data:JSON.stringify({
                        "email":email
                    }),
                    success:function (result) {
                        if(result.code == 200){
                            settime(obj,span);
                        }else{
                            $(".el-code").next().html(result.message);
                        }
                    },
                    dataType:"json"
                });
            }
        }

        function checkAccount2() {
            var account = $("#account").val();
            if(!checkAccount()){
                $("#account").next().html("请输入手机号/邮箱");
            }else{
                var captcha1 = new TencentCaptcha('2077491291', function(res) {
                    if(res.ret == 0){
                        $.ajax({
                            type:"post",
                            url:"/checkCaptcha",
                            contentType:"application/json",
                            data:JSON.stringify({
                                "ticket":res.ticket,
                                "randstr":res.randstr
                            }),
                            success:function (result) {
                                if(result.code == 200) {
                                    $.ajax({
                                        type:"post",
                                        url:"/checkAccount",
                                        contentType:"application/json",
                                        data:JSON.stringify({
                                            "account":account
                                        }),
                                        success:function (result) {
                                            if(result.code == 200){
                                                $(".findpwd-b").removeClass("layui-hide");
                                                $(".findpwd-a").addClass("layui-hide");
                                                if(account.length == 11){
                                                    $(".findpwd-b h3").html("手机号："+account);
                                                    $(".el-code-button").attr("onclick","getCode(3)");
                                                    $(".modifyAccount").val(account);
                                                }else{
                                                    $(".findpwd-b h3").html("邮箱："+account);
                                                    $(".el-code-button").attr("onclick","getEmailCode(1)");
                                                    $(".modifyAccount").val(account);
                                                }
                                            }else{
                                                $("#account").next().html(result.message);
                                            }
                                        },
                                        dataType:"json"
                                    });
                                }
                            },
                            dataType:"json"
                        });
                    }
                });
                captcha1.show(); // 显示验证码
            }
        }

        function modifyPwd() {
            var checkPwd = newPassword() && confirmPassword() && checkCode();
            var newPwd = $("#newPwd").val();
            var modifyAccount = $(".modifyAccount").val();
            var code = $("#code").val();
                if(checkPwd == true){
                    $.ajax({
                        type:"post",
                        url:"/modifyPwd",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "newPwd":newPwd,
                            "modifyAccount":modifyAccount,
                            "code":code
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                window.location.href="/success?info=修改密码成功";
                            }else{
                                $("#code").parent().next().html(result.message);
                            }
                        },
                        dataType:"json"
                    });
                }
        }
    </script>
</head>
<body>
<div th:replace="navigation :: nav"></div>
<div class="layui-container tree-marginTop" style="background: white">
    <div class="layui-row">
        <div class="register-main">
            <div class="title-line">
                <span class="tit">忘记密码</span>
            </div>
            <div class="register-container" style="padding-top: 60px;padding-bottom: 150px;">
                <div class="findpwd-a">
                    <div class="form-group" style="position: relative;">
                        <input type="text" class="el-input" id="account" name="account" placeholder="请输入绑定的手机号/邮箱" autocomplete="off" onkeyup="checkAccount()">
                        <p class="error-message"></p>
                        <div class="autocomplete layui-hide" style="top: 48px;">
                            <ul>
                                <li class="on">@qq.com</li>
                                <li>@163.com</li>
                                <li>@126.com</li>
                                <li>@gmail.com</li>
                                <li>@foxmail.com</li>
                                <li>@sina.com</li>
                                <li>@yeah.net</li>
                                <li>@sohu.com</li>
                                <li>@outlook.com</li>
                            </ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" class="el-button--primary" onclick="checkAccount2()"><span>确认</span></button>
                    </div>
                </div>
                <div class="findpwd-b layui-hide">
                    <h3 style="padding: 15px 0;text-align: center"></h3>
                    <div>
                        <input type="password" class="el-input" id="newPwd" name="newPwd" placeholder="新密码：6～16位字符，区分大小写" autocomplete="off" onkeyup="newPassword()">
                        <p class="error-message"></p>
                    </div>
                    <div class="form-group">
                        <input type="password" class="el-input" id="confirmPwd" name="confirmPwd" placeholder="请输入确认密码" autocomplete="off" onkeyup="confirmPassword()">
                        <p class="error-message"></p>
                    </div>
                    <div class="form-group">
                        <div class="el-code">
                            <input type="text" class="el-input" id="code" name="code" placeholder="请输入短信/邮件验证码" autocomplete="off" onkeyup="checkCode()">
                            <button type="button" class="btn-login el-code-button" id="el-code-button"><span>点击获取</span></button>
                        </div>
                        <p class="error-message"></p>
                    </div>
                    <div class="form-group">
                        <button type="button" class="el-button--primary" onclick="modifyPwd()"><span>确认修改</span></button>
                    </div>
                </div>
                <input type="text" class="modifyAccount" hidden="hidden">
            </div>
        </div>
    </div>
</div>
<div th:replace="footer :: foot"></div>
</body>
</html>